<template>
  <div class="inventory-management">
    <h1 class="title">餐具盘点管理</h1>
    <el-button class="back-button" type="text" @click="goBack">
      <i class="el-icon-arrow-left"></i>返回
    </el-button>
    <!-- 查询表单 -->
    <el-form @submit.native.prevent="searchInventory" class="search-form">
      <el-form-item label="餐具名称">
        <el-input v-model="searchForm.name" placeholder="请输入餐具名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 盘点结果表 -->
    <el-table :data="inventoryItems" v-if="inventoryItems.length" class="inventory-table">
      <el-table-column prop="name" label="餐具名称"></el-table-column>
      <el-table-column prop="quantity" label="库存数量"></el-table-column>
    </el-table>

    <!-- 提示信息，当没有查询到盘点结果时显示 -->
    <p v-else class="no-inventory">暂无盘点结果</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchForm: {
          name: ''
        },
        inventoryItems: []
      };
    },
    methods: {
      searchInventory() {
        // 根据餐具名称进行库存盘点查询
        // ...

        // 模拟盘点结果
        this.inventoryItems = [
          { name: '餐具A', quantity: 100 },
          { name: '餐具B', quantity: 200 },
          { name: '餐具C', quantity: 150 },
        ];
      },
      goBack() {
        // 执行退出登录的逻辑
        // 返回登录页
        this.$router.push('/Index');
      }
    }
  };
</script>

<style scoped>
  .title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
  }

  .back-button {
    margin-bottom: 30px;
    text-align: left;
    margin-left: 20px;
  }

  .search-form {
    margin-bottom: 20px;
    text-align: right;
    margin-right: 20px;
  }

  .inventory-table {
    margin-bottom: 20px;
    width: 100%;
  }

  .no-inventory {
    text-align: center;
    margin-top: 20px;
    font-style: italic;
    color: #999;
  }
</style>
